<template>
	<view class="content">
		<!-- 1.搜索框部分 -->
		<UgoSerach></UgoSerach>

		<!-- 2.轮播图部分 -->
		<u-swiper :list="swiperList" mode="widthFix" height="340" name="image_src"></u-swiper>

		<!-- 3.导航栏部分 -->
		<view class="nav u-flex">
			<navigator v-for="item in navList" :key="item.name" class="u-flex-1 u-p-15">  
				<u-image width="100%" mode="widthFix" :src="item.image_src"></u-image>
			</navigator>
		</view>

		<!-- 4.楼层部分 -->
		<view class="floor" >
			<view class="floorGroup" v-for="item1 in floorList" :key="item1.floor_title.name" >
				<view class="title">
					<u-image width="100%" mode="widthFix" :src="item1.floor_title.image_src"></u-image>
				</view>
				<view class="floorList" >
					<navigator v-for="item2 in item1.product_list" :key="item2.name">
						<u-image mode="scaleToFill" width="100%"  height="100%" :src="item2.image_src"></u-image>
					</navigator>
				</view>
			</view>	
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList:[],
				navList:[],
				floorList:[],
			}
		},
		onLoad() {
			this.getSwiperList()
			this.getNavList()
			this.getFloorList()
		},
		methods: {
			// 获取轮播列表
			async getSwiperList() {
				// const [err,res] = await uni.request({url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'})				
				// this.swiperList=res.data.message
				this.swiperList =await this.$u.http.get("/home/swiperdata")
			},
			// 获取导航栏列表
			async getNavList() {
				// const [err,res] = await uni.request({url:'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems'})
				// this.navList = res.data.message
				this.navList =await this.$u.http.get("/home/catitems")
			},
			// 获取楼层列表
			async getFloorList() {
				// const [err,res] = await uni.request({url:'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata'})
				// this.floorList = res.data.message
				this.floorList =await this.$u.http.get("/home/floordata")
			}
		}
	}
</script>

<style lang="scss" scoped>
.floorGroup {
  margin-top: 10rpx;
}
.floorList {
  padding: 0 12rpx;

  /* 清除浮动 */
  overflow: hidden;
  navigator {
    float: left;
  }
  // 第一张图片
  navigator:nth-child(1) {
    width: 232rpx;
    height: 386rpx;
  }
  /* 后四张图片 */
  navigator:nth-last-child(-n + 4) {
    width: 233rpx;
    height: 188rpx;
  }
  /* 2 和 4 图片 */
  navigator:nth-child(2),
  navigator:nth-child(4) {
    margin: 0 15rpx;
  }

  /* 后两张图片 */
  navigator:nth-last-child(-n + 2) {
    margin-top: 10rpx;
  }
}
</style>
